<template>
  <!-- 特别推荐 -->
  <div class="center-wrap recommend-container">
    <div class="space-between recommend-box">
      <div class="recommend-left">
        <StoreyTitle :title="title">
          <svg slot="svg" t="1595231975701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3707" width="200" height="200">
            <path d="M215.04 153.6h593.92c33.93024 0 61.44 27.50976 61.44 61.44v643.3792a30.72 30.72 0 0 1-45.96224 26.6752L512 706.56l-312.43776 178.5344A30.72 30.72 0 0 1 153.6 858.4192V215.04c0-33.93024 27.50976-61.44 61.44-61.44z"
              fill="#9696ED" p-id="3708"></path>
            <path d="M512 555.392l-90.05056 46.60736a19.27168 19.27168 0 0 1-27.84256-20.41856l17.12128-98.2784-72.2432-69.32992a19.27168 19.27168 0 0 1 10.61376-32.98304l100.1216-14.32064 45.05088-89.8816a19.27168 19.27168 0 0 1 34.4576 0l45.05088 89.8816 100.11648 14.32064a19.27168 19.27168 0 0 1 10.61888 32.98304l-72.2432 69.32992 17.12128 98.2784a19.27168 19.27168 0 0 1-27.84768 20.41856L512 555.392z"
              fill="#FFD778" p-id="3709"></path>
          </svg>
        </StoreyTitle>
        <VideoPreview :videolist="videolist" :classname="classname"></VideoPreview>
      </div>
      <div class="recommend-right">
        <img src="../../assets/img/tbtj_img1.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  import StoreyTitle from '../public/StoreyTitle.vue'
  import VideoPreview from '../public/VideoPreview.vue'
  export default {
    name: 'RecommendList',
    components: {
      StoreyTitle,
      VideoPreview
    },
    data() {
      return {
        title: '特别推荐',
        classname:'recommend-box',
        videolist: [{
            img: require('../../assets/img/douga_4k.jpg'),
            bg: require('../../assets/img/douga_4k1.jpg'),
            bgnum: '28',
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            time: '02:21',
            name: '一个人的世界',
            list: ['哈哈哈', '我不做人啦，会长！！！', 're0必须要有排面！', '哎哟卧槽', '我知道我的头即将要被笑飞了', '封面选的好，绅士少不了', '我笑死了你有什么好处？',
              '如果沙雕有颜色一定是蓝色的', '这个封面我好像在哪里见过', '全是我的老婆', '你币有了', '绅士们相见即是缘分', '女朋友就是这样被你打坏的'
            ],
            crown:require('../../assets/img/icon_gold.png'),
            count1:'390.7万',
            count2:'56.6万'
          },
          {
            img: require('../../assets/img/dynamiclist_lwdgz.jpg'),
            bg: require('../../assets/img/dynamic_lwdgz1.jpg'),
            bgnum: '28',
            title: '龙王的工作',
            time: '02:21',
            name: '一个人的世界',
            list: ['哈哈哈', '我不做人啦，会长！！！', 're0必须要有排面！', '哎哟卧槽', '我知道我的头即将要被笑飞了', '封面选的好，绅士少不了', '我笑死了你有什么好处？',
              '如果沙雕有颜色一定是蓝色的', '这个封面我好像在哪里见过', '全是我的老婆', '你币有了', '绅士们相见即是缘分', '女朋友就是这样被你打坏的'
            ],
            crown:require('../../assets/img/icon_gold.png'),
            count1:'390.7万',
            count2:'56.6万'
          },
          {
            img: require('../../assets/img/dynamic_almls.jpg'),
            bg: require('../../assets/img/dynamic_almls1.jpg'),
            bgnum: '28',
            title: '【4月】埃罗芒阿老师 02【独家正版】',
            time: '23:41',
            name: '一个人的世界',
            list: ['哈哈哈', '我不做人啦，会长！！！', 're0必须要有排面！', '哎哟卧槽', '我知道我的头即将要被笑飞了', '封面选的好，绅士少不了', '我笑死了你有什么好处？',
              '如果沙雕有颜色一定是蓝色的', '这个封面我好像在哪里见过', '全是我的老婆', '你币有了', '绅士们相见即是缘分', '女朋友就是这样被你打坏的'
            ],
            crown:require('../../assets/img/icon_silver.png'),
            count1:'390.7万',
            count2:'56.6万'
          },
          {
            img: require('../../assets/img/dynamic_jojo.jpg'),
            bg: require('../../assets/img/dynamic_jojo1.jpg'),
            bgnum: '28',
            title: '【10月】JOJO的奇妙冒险 黄金之风 23【独家正版】',
            time: '24:01',
            name: '一个人的世界',
            list: ['哈哈哈', '我不做人啦，会长！！！', 're0必须要有排面！', '哎哟卧槽', '我知道我的头即将要被笑飞了', '封面选的好，绅士少不了', '我笑死了你有什么好处？',
              '如果沙雕有颜色一定是蓝色的', '这个封面我好像在哪里见过', '全是我的老婆', '你币有了', '绅士们相见即是缘分', '女朋友就是这样被你打坏的'
            ],
            count1:'390.7万',
            count2:'56.6万'
          },
        ],
      }
    }
  }
</script>

<style scoped>
  .recommend-box{
    height: 252px;
    overflow: hidden;
  }
  .recommend-right{
    margin-top: 52px;
    width: 320px;
  }
  .recommend-right>img{
    width: 100%;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
